<template>
  <el-dialog :visible.sync="show" append-to-body>
    <k-form label-width="160px" ref="form" :data="form" @submit="onSubmit">
      <k-form-item label="标题" prop="title" :validate="['required']">
        <el-input v-model="form.title"/>
      </k-form-item>

      <k-form-item label="链接" prop="link" :validate="['required']">
        <el-input v-model="form.link"/>
      </k-form-item>

      <k-form-item label="图片" prop="image" :validate="['required']">
        <k-simple-upload v-model="form.image"/>
      </k-form-item>

      <k-form-item label="状态">
        <el-radio-group v-model="form.is_disabled">
          <el-radio :label="0">显示</el-radio>
          <el-radio :label="1">隐藏</el-radio>
        </el-radio-group>
      </k-form-item>

      <k-form-item label="显示顺序" prop="sort" :validate="['required']">
        <el-input v-model="form.sort"/>
      </k-form-item>
    </k-form>

    <div slot="footer">
      <el-button type="primary" @click="$refs.form.onSubmit()" :loading="subing">确认</el-button>

      <el-button @click="show = false">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { Vue, Component, Watch } from 'vue-property-decorator'
import KSimpleUpload from '@/components/simple-upload/index'
@Component({
  components: { KSimpleUpload },
  props: {
    value: Boolean
  }
})
export default class DataBannerForm extends Vue {
  form = {
    type: 'index',
    is_disabled: 0
  }
  subing = false
  callback = () => {}

  get show() {
    return this.value
  }

  set show(val) {
    this.$emit('input', val)
  }

  @Watch('show')
  onShowChange (val) {
    if (val) {
      this.$set(this.form, 'sort', KE.timestamp())
    }
  }

  onSubmit () {
    this.subing = true
    this.$http.post('admin/banner', this.form)
      .finally(() => this.subing = false)
      .then(result => {
        if (result.res_code === 0) {
          this.$message.success('保存成功')
          this.callback(result.data)
          this.show = false
        } else {
          this.$message.error(result.res_msg)
        }
      })
  }
}
</script>

<style scoped>

</style>
